<template>
	<view :class="themeName">
		<view class="withdraw">

			<view class="withdraw-header m-b-24">
				<template v-if="withdrawData.type != undefined">
					<u-tabs :list="withdrawData.type" :active-color="themeColor" :is-scroll="true" :current="current"
						@change="change"></u-tabs>
				</template>
			</view>

			<!-- 微信 -->
			<template v-if="withdrawData.type[current] != undefined">
				<template v-if="withdrawData.type[current].value == 4">
					<view class="withdraw-other m-b-24">
						<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('微信账号')"
							:placeholder="$zhTran('请输入微信账号')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('真实姓名')"
							:placeholder="$zhTran('请输入真实姓名')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
							:placeholder="$zhTran('(选填)')">
						</u-field>

						<view class="m-t-20">
							<uploader :tips="$zhTran('微信收款码')" v-model="withdraw.money_qr_code"></uploader>
						</view>
					</view>
				</template>
			</template>

			<!-- 支付宝 -->
			<template v-if="withdrawData.type[current] != undefined">
				<template v-if="withdrawData.type[current].value == 5">
					<view class="withdraw-other m-b-24">
						<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('支付宝账号')"
							:placeholder="$zhTran('请输入支付宝账号')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('真实姓名')"
							:placeholder="$zhTran('请输入真实姓名')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
							:placeholder="$zhTran('(选填)')">
						</u-field>

						<view class="m-t-20">
							<uploader :tips="$zhTran('支付宝收款码')" v-model="withdraw.money_qr_code"></uploader>
						</view>
					</view>
				</template>
			</template>

			<!-- 银行卡 -->

			<template v-if="withdrawData.type[current] != undefined">
				<template v-if="withdrawData.type[current].value == 3">
					<view class="withdraw-other m-b-24">
						<u-field label-width="160" v-model="withdraw.account" :label="$zhTran('银行卡账号')"
							:placeholder="$zhTran('请输入银行卡账号')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.real_name" :label="$zhTran('持卡人姓名')"
							:placeholder="$zhTran('请输入持卡人姓名')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.bank" :label="$zhTran('提现银行')"
							:placeholder="$zhTran('请输入银行名称')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.subbank" :label="$zhTran('银行支行')"
							:placeholder="$zhTran('如: 金湾银行')">
						</u-field>

						<u-field label-width="160" v-model="withdraw.apply_remark" :label="$zhTran('备注')"
							:placeholder="$zhTran('(选填)')">
						</u-field>
					</view>
				</template>
			</template>

			<view class="withdraw-content">
				<view class="input flex row-between">
					<view class="flex flex-1">
						<text>{{withdrawData.price_symbol}}</text>
						<input type="number" v-model="withdraw.money" placeholder="0.00" />
					</view>

					<view class="xs">
						<text class="all-withdraw flex row-right"
							@click="withdraw.money = withdrawData.able_withdraw">{{$zhTran('全部提现')}}</text>
						<view class="muted m-t-10">{{$zhTran('可提现余额')}} {{withdrawData.price_symbol}}
							{{withdrawData.able_withdraw}}
						</view>
					</view>
				</view>

				<view class="m-t-30 xs muted">
					{{$zhTran('提示： 提现需扣除手续费')}}{{withdrawData.percentage}}%
				</view>
			</view>

			<view class="withdraw-btn flex row-center br60 lg white" @click="withdrawFun('')">
				{{$zhTran('确认提现')}}
			</view>

			<view class="m-t-30 muted sm flex row-center"
				@click="goPage('/bundle/pages/withdraw_record/withdraw_record')">
				{{$zhTran('提现记录')}}
			</view>

		</view>
		<w-jishuzhichi />
	</view>
</template>

<script>
	import {
		apiWithdrawGetConfig,
		apiWithdrawApply
	} from "@/api/user.js";
	import {
		prepay
	} from "@/api/app.js";
	export default {
		data() {
			return {
				list: [],
				current: 0,

				withdrawData: {
					able_withdraw: 2, //可提现
					min_withdraw: '', //最小提现金额
					max_withdraw: '', //最大提现金额
					percentage: '', //提现手续百分比
					type: [] //提现类型
				},

				withdraw: {
					type: [], //提现类型
					money: '', //提现余额
					account: '', //收款账户
					real_name: '', //真实姓名
					apply_remark: '', //备注
					money_qr_code: '', //收款码
					bank: '', // 提现银行
					subbank: '' //支行银行卡
				}
			}
		},

		methods: {
			change(event) {
				this.current = event;
			},

			// 获取提现基础数据
			getWithdrawData() {
				apiWithdrawGetConfig().then(res => {
					this.withdrawData = this.$zhTran(res);
				})
			},

			// 提现
			withdrawFun() {
				if (this.withdraw.money == '') return this.$toast({
					title: this.$zhTran('请输入提现金额')
				})
				const params = {
					type: this.withdrawData.type[this.current].value, //提现类型
					money: this.withdraw.money, //提现余额
					account: this.withdraw.account, //收款账户
					real_name: this.withdraw.real_name, //真实姓名
					apply_remark: this.withdraw.apply_remark, //备注
					money_qr_code: this.withdraw.money_qr_code.toString(), //收款码
					bank: this.withdraw.bank, // 提现银行
					subbank: this.withdraw.subbank //支行银行卡
				}
				apiWithdrawApply({
						...params
					})
					.then(res => {
						this.withdraw.money = ''
						this.$Router.push({
							path: '/bundle/pages/withdraw_success/withdraw_success',
							query: {
								id: res.id
							}
						})
					})
			},

			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		},

		onShow() {
			this.getWithdrawData();
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	}
</script>

<style lang="scss">
	.withdraw {
		padding: 30rpx;

		.withdraw-header {
			padding: 10rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}

		.withdraw-other {
			padding: 24rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}

		.withdraw-content {
			width: 100%;
			height: 350rpx;
			padding: 66rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;

			.input {
				padding: 24rpx 0;
				font-size: 46rpx;
				border-bottom: 1rpx solid #E5E5E5;

				input {
					padding-left: 30rpx;
					font-size: 66rpx;
					height: 80rpx;
				}
			}

			.tips {
				@include font_color();
			}

			.all-withdraw {
				@include font_color();
			}
		}

		.withdraw-btn {
			width: 100%;
			height: 84rpx;
			margin-top: 60rpx;
			@include background_color()
		}
	}
</style>